<template>
	<!--TODO::接货证明-->
	<view class="cardBox" v-if="jieh">
		<view v-if="jieh">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle" style="width: 79%;">{{text.jiehuo}} </text> 
				</view>
			</view>	
			<view style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="jieh_sc">{{text.jiehuo_time}} : 
				<!--TODO::时间选择-->
				<template>
					<formPicker :item="{}" @change="selPicker" :postjhsj="order.orderJoin.receiving_time"/>
				</template>
			</view>	
			<view style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-else-if="jieh_ck&&order.orderJoin.receiving_time!='1970-01-01'&&order.orderJoin.receiving_time">{{text.jiehuo_time}} :
				<!--TODO::时间选择-->
				{{order.orderJoin.receiving_time}}
			</view>	
			<!-- <view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;">{{text.picurl}} :</view> -->
			<view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="loading&&jieh_sc">
				<view class="text">{{ $t('现场照片') }}：</view>
				<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="releasePayImgList" max-count="1" :deletable="releasePayImgDeletable"></u-upload>
				<view style="font-size: 20rpx;">{{$t("注：现场照片只可通过现场拍照上传，无法从相册内选取照片")}}</view>
				<view class="viewBtn" @click="doSaveReleasePayImg" 
				style="padding:2% 4%;background-color: #FF9100;width:150rpx;color: #fff;margin: 0 auto;text-align: center;margin-top: 3%;" v-if="!order.orderJoin.receiving_img">
					{{ $t('提交') }}
				</view>
			</view>	
			<view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="loading&&jieh_ck">
				<view class="text">{{ $t('现场照片') }}：</view>
				<u-upload :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="releasePayImgList" max-count="1" :deletable="releasePayImgDeletable==false" v-if="releasePayImgList.length>0"></u-upload>
				<view v-else>{{$t("暂未上传")}}</view>
			</view>	
		</view>
				
		<!--TODO::交货证明-->
		<view v-if="jiaoh">
			<view class="flex" style="margin-top: 30rpx;">
				<view class="biao" style="width: 100%;display: flex;">
					<span class="biao_span">|</span> 
					<text class="cardTitle" style="width: 79%;">{{text.jiaohuo}} </text> 
				</view>
			</view>	
			
			<view style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="jiaoh_sc">{{text.jiaohuo_time}} : 
				<!--TODO::时间选择-->
				<template>
					<formPicker :item="{}" @change="selPickers" :postjiaohuo="order.orderJoin.delivery_time"/>
				</template>
			</view>	
			<view style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-else-if="jiaoh_ck&&order.orderJoin.delivery_time!='1970-01-01'&&order.orderJoin.delivery_time">{{text.jiaohuo_time}} :
				<!--TODO::时间选择-->
				{{order.orderJoin.delivery_time}}
			</view>	
			<!-- <view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;">{{text.picurl}} :</view> -->
			<view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="loading&&jiaoh_sc">
				<view class="text">{{ $t('现场照片') }}：</view>
				<u-upload ref="uUploads" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="releasePayImgList1" max-count="1" :deletable="releasePayImgDeletable"></u-upload>
				<view style="font-size: 20rpx;">{{$t("注：现场照片只可通过现场拍照上传，无法从相册内选取照片")}}</view>
				<view class="viewBtn" @click="deliveryCertificate" 
				style="padding:2% 4%;background-color: #FF9100;width:150rpx;color: #fff;margin: 0 auto;text-align: center;margin-top: 3%;" v-if="!order.orderJoin.delivery_img">
					{{ $t('提交') }}
				</view>
			</view>	
			<view  style="font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;" v-if="loading&&jiaoh_ck">
				<view class="text">{{ $t('现场照片') }}：</view>
				<u-upload :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="releasePayImgList1" max-count="1" :deletable="releasePayImgDeletable==false" v-if="releasePayImgList1.length>0"></u-upload>
				<view v-else>{{$t("暂未上传")}}</view>
			</view>
		</view>
		
		<!-- <image :src="img" class="order_img"  style="margin:0rpx 3%;margin-top: 20rpx;"></image> -->
		<view style="height: 10rpx;width: 100%;"></view>
	</view>
	
	
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import formPicker from "@/components/buildForm/formPicker.vue";
	export default {
		components: {
			formPicker,
		},
		props: {
			order: {
				type: [Array, Object, Number, String],
				default: ''
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				// item:{
				// 	label:this.$t("请选择"),
				// },
				//文字
				text:{
					jiaohuo:this.$t('交货证明'),
					jiehuo:this.$t('接货证明'),
					jiaohuo_time:this.$t('交货时间'),
					jiehuo_time:this.$t('接货时间'),
					picurl:this.$t('现场照片'),
				},
				img:HTTP_IMG_UTL+'huangjin.png',
				releasePayImgAction: HTTP_REQUEST_URL + '/common/upload',
				releasePayImgList: [],
				releasePayImgList1: [],
				releasePayImgDeletable: true,
				receiving_img:'',
				receiving_time:'',
				delivery_img:'',
				delivery_time:'',
				loading:true,
				jieh:false,
				jieh_sc:false,
				jieh_ck:false,
				jiaoh:false,
				jiaoh_sc:false,
				jiaoh_ck:false,
			}
		},
		mounted() {
			if(this.order){
				if(this.order.orderJoin.delivery_img){
					this.releasePayImgList1=[{url:this.IMAGE_URL+this.order.orderJoin.delivery_img}]
				}
				if(this.order.orderJoin.receiving_img){
					this.releasePayImgList=[{url:this.IMAGE_URL+this.order.orderJoin.receiving_img}]
				}
				this.jiehuo()
				this.jiaohuo()
			}
		},
		methods:{
			jiehuo(){
				if(this.order.orderInfo.type=='crossborder'){
					this.jieh=true
					if(this.order.role==2){
						this.jieh_sc=true
					}else{
						this.jieh_ck=true
					}
				}
				if(this.order.orderInfo.type=='transport'&&this.order.orderInfo.release_info.release_type==2&&this.order.orderInfo.release_info.human_type==1){
					this.jieh=true
					if(this.order.role==2){
						this.jieh_sc=true
					}else{
						this.jieh_ck=true
					}
				}else if(this.order.orderInfo.type=='transport'&&this.order.orderInfo.release_info.release_type==1&&this.order.orderInfo.release_info.human_type==2){
					this.jieh=true
					if(this.order.role==1){
						this.jieh_sc=true
					}else{
						this.jieh_ck=true
					}
				}
			},
			jiaohuo(){
				if(this.order.orderInfo.type=='crossborder'){
					this.jiaoh=true
					if(this.order.role==2){
						this.jiaoh_sc=true
					}else{
						this.jiaoh_ck=true
					}
				}
				if(this.order.orderInfo.type=='transport'&&this.order.orderInfo.release_info.release_type==2&&this.order.orderInfo.release_info.human_type==1){
					this.jiaoh=true
					if(this.order.role==2){
						this.jiaoh_sc=true
					}else{
						this.jiaoh_ck=true
					}
				}else if(this.order.orderInfo.type=='transport'&&this.order.orderInfo.release_info.release_type==1&&this.order.orderInfo.release_info.human_type==2){
					this.jiaoh=true
					if(this.order.role==1){
						this.jiaoh_sc=true
					}else{
						this.jiaoh_ck=true
					}
				}
				if(this.order.orderInfo.type=='goods'&&this.order.orderInfo.release_info.is_express_price==1){
					this.jiaoh=true
					if(this.order.role==2){
						this.jiaoh_sc=true
					}else{
						this.jiaoh_ck=true
					}
				}
			},
			releasePayImgSuccess(data, index, lists, name) {
				let formData = [];
				if (lists.length > 0) {
					for (let i = 0; i < lists.length; i++) {
						if (lists[i].response) {
							let temp = {
								url: lists[i].response.data.url
							}
							formData.push(temp)
						} else if (lists[i].url) {
							let temp = {
								url: lists[i].url
							}
							formData.push(temp)
						}
					}
				} else {
					formData = []
				}
				this.receiving_img = formData[0].url
				this.delivery_img = formData[0].url
			},
			selPicker(key, value) {
				this.receiving_time=value;
			},
			selPickers(key, value) {
				this.delivery_time=value;
			},
			doSaveReleasePayImg(){
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(files)
				if(files.length>0){
					// this.payment_proof_img=files[0].response.data.url
					// this.charge_certificate_img=[{
					// 	url:files[0].response.data.url
					// }]
					const that = this
					that.$u.api.order.receivingCertificate({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						receiving_img: files[0].response.data.url,
						role: that.order.role,
						orderInfo:that.order.orderInfo,
					}).then(res => {
						this.releasePayImgList = {
							url: this.IMAGE_URL+files[0].response.data.url
						}
						this.$u.toast(this.$t('操作成功'), 2000)
						this.$emit('on-oversize', this.is_tj);
					}).catch(err => {
						console.log(err)
					})
				}
				// console.log(this.payment_proof_img);
				if (files.length === 0) {
					this.$u.toast(this.$t('请上传接货证明图片'), 2000)
					return false
				}
				
				if(files.length>0){
					// this.charge_certificate_img=files[0].response.data.url
					this.releasePayImgList={
						url:this.IMAGE_URL+files[0].response.data.url,
						// fullurl:this.IMAGE_URL+files[0].response.data.url,
					} 
				}
			},
			deliveryCertificate(){
				let files = [];
				files = this.$refs.uUploads.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(files)
				if(files.length>0){
					// this.payment_proof_img=files[0].response.data.url
					// this.charge_certificate_img=[{
					// 	url:files[0].response.data.url
					// }]
					const that = this
					that.$u.api.order.deliveryCertificate({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						delivery_img: files[0].response.data.url,
						role: that.order.role,
						orderInfo:that.order.orderInfo,
					}).then(res => {
						this.releasePayImgList1 = {
							url: this.IMAGE_URL+files[0].response.data.url
						}
						this.$u.toast(this.$t('操作成功'), 2000)
						this.$emit('on-oversize', this.is_tj);
					}).catch(err => {
						console.log(err)
					})
				}
				// console.log(this.payment_proof_img);
				if (files.length === 0) {
					this.$u.toast(this.$t('请上传交货证明图片'), 2000)
					return false
				}
				
				if(files.length>0){
					// this.charge_certificate_img=files[0].response.data.url
					this.releasePayImgList1={
						url:this.IMAGE_URL+files[0].response.data.url,
						// fullurl:this.IMAGE_URL+files[0].response.data.url,
					}
				}
			},
			upload(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
</style>